<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1 class="page-title">系统概览</h1>
      <div class="header-actions">
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon user-icon">
            <el-icon size="32"><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalUsers }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon article-icon">
            <el-icon size="32"><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalArticles }}</div>
            <div class="stat-label">知识文章</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon event-icon">
            <el-icon size="32"><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.pendingEvents }}</div>
            <div class="stat-label">待处理事件</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon volunteer-icon">
            <el-icon size="32"><Avatar /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalVolunteers }}</div>
            <div class="stat-label">志愿者</div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="dashboard-content">
      <!-- 实时事件监控 -->
      <el-card class="events-card">
        <template #header>
          <div class="card-header">
            <span>实时事件监控</span>
            <el-button
              text
              type="primary"
              @click="$router.push('/admin/events/records')"
            >
              查看全部
            </el-button>
          </div>
        </template>
        <el-table :data="recentEvents" style="width: 100%">
          <el-table-column prop="title" label="事件标题" width="200" />
          <el-table-column prop="eventType" label="事件类型" width="120" />
          <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
            <template #default="scope">
              <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
                {{ scope.row.urgencyLevel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reportedAt" label="上报时间" width="160" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="handleEventAction(scope.row)"
              >
                处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 用户活跃度分析 -->
      <el-card class="activity-card">
        <template #header>
          <div class="card-header">
            <span>用户活跃度分析</span>
            <el-select
              v-model="activityPeriod"
              placeholder="选择时间段"
              size="small"
            >
              <el-option label="今日" value="today" />
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
            </el-select>
          </div>
        </template>
        <div class="activity-charts">
          <div class="chart-placeholder">
            <p>活跃用户数: {{ activityStats.activeUsers }}</p>
            <p>学习完成率: {{ activityStats.completionRate }}%</p>
            <p>平均学习时长: {{ activityStats.avgStudyTime }}分钟</p>
          </div>
        </div>
      </el-card>

      <!-- 知识学习进度统计 -->
      <el-card class="learning-card">
        <template #header>
          <div class="card-header">
            <span>知识学习进度统计</span>
          </div>
        </template>
        <div class="learning-stats">
          <div class="learning-item">
            <div class="learning-title">急救基础知识</div>
            <el-progress :percentage="75" />
            <div class="learning-detail">完成率: 75% (150/200人)</div>
          </div>
          <div class="learning-item">
            <div class="learning-title">心肺复苏术</div>
            <el-progress :percentage="60" />
            <div class="learning-detail">完成率: 60% (120/200人)</div>
          </div>
          <div class="learning-item">
            <div class="learning-title">创伤处理</div>
            <el-progress :percentage="45" />
            <div class="learning-detail">完成率: 45% (90/200人)</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据可视化图表 -->
    <div class="charts-grid">
      <!-- 用户活跃度趋势图 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户活跃度趋势</span>
            <el-select v-model="chartPeriod" size="small" style="width: 100px">
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
              <el-option label="本年" value="year" />
            </el-select>
          </div>
        </template>
        <Chart type="line" :data="userActivityData" height="300px" />
      </el-card>

      <!-- 事件类型分布饼图 -->
      <el-card class="chart-card">
        <template #header>
          <span>事件类型分布</span>
        </template>
        <Chart type="pie" :data="eventTypeData" height="300px" />
      </el-card>

      <!-- 知识学习进度条形图 -->
      <el-card class="chart-card">
        <template #header>
          <span>知识学习进度</span>
        </template>
        <Chart type="bar" :data="knowledgeProgressData" height="300px" />
      </el-card>

      <!-- 志愿者技能雷达图 -->
      <el-card class="chart-card">
        <template #header>
          <span>志愿者技能分布</span>
        </template>
        <Chart type="radar" :data="volunteerSkillsData" height="300px" />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Refresh,
  User,
  Document,
  Warning,
  Avatar,
} from "@element-plus/icons-vue";

// 导入图表组件
import Chart from "~/components/common/Chart.vue";

const stats = reactive({
  totalUsers: 1250,
  totalArticles: 68,
  pendingEvents: 5,
  totalVolunteers: 89,
});

const activityPeriod = ref("week");
const activityStats = reactive({
  activeUsers: 342,
  completionRate: 67,
  avgStudyTime: 45,
});

// 图表相关数据
const chartPeriod = ref("week");

// 用户活跃度趋势数据
const userActivityData = computed(() => ({
  xAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  legend: ["活跃用户", "学习完成"],
  series: [
    {
      name: "活跃用户",
      data: [120, 200, 150, 80, 70, 110, 130],
    },
    {
      name: "学习完成",
      data: [80, 150, 120, 60, 50, 90, 100],
    },
  ],
}));

// 事件类型分布数据
const eventTypeData = computed(() => ({
  name: "事件类型",
  data: [
    { value: 35, name: "食物中毒" },
    { value: 25, name: "跌倒受伤" },
    { value: 20, name: "心血管事件" },
    { value: 15, name: "呼吸困难" },
    { value: 5, name: "其他" },
  ],
}));

// 知识学习进度数据
const knowledgeProgressData = computed(() => ({
  xAxis: ["心肺复苏", "创伤处理", "急救包扎", "AED使用", "应急疏散"],
  legend: ["完成率"],
  series: [
    {
      name: "完成率",
      data: [75, 60, 85, 45, 90],
    },
  ],
}));

// 志愿者技能雷达图数据
const volunteerSkillsData = computed(() => ({
  name: "志愿者技能",
  indicator: [
    { name: "急救知识", max: 100 },
    { name: "沟通能力", max: 100 },
    { name: "组织协调", max: 100 },
    { name: "心理辅导", max: 100 },
    { name: "应急处置", max: 100 },
    { name: "医疗常识", max: 100 },
  ],
  data: [
    {
      value: [85, 75, 80, 70, 90, 85],
      name: "平均技能水平",
    },
  ],
}));

const recentEvents = ref([
  {
    id: 1,
    title: "校园食堂食物中毒事件",
    eventType: "食物中毒",
    urgencyLevel: "high",
    status: "pending",
    reportedAt: "2025-11-06 14:30:00",
  },
  {
    id: 2,
    title: "学生宿舍意外受伤",
    eventType: "意外伤害",
    urgencyLevel: "medium",
    status: "processing",
    reportedAt: "2025-11-06 13:15:00",
  },
  {
    id: 3,
    title: "实验室化学品泄漏",
    eventType: "化学事故",
    urgencyLevel: "critical",
    status: "pending",
    reportedAt: "2025-11-06 12:45:00",
  },
]);

const getUrgencyType = (level: string) => {
  const types = {
    low: "info",
    medium: "warning",
    high: "danger",
    critical: "",
  };
  return types[level as keyof typeof types] || "info";
};

const getStatusType = (status: string) => {
  const types = {
    pending: "warning",
    processing: "primary",
    resolved: "success",
    closed: "info",
  };
  return types[status as keyof typeof types] || "info";
};

const refreshData = () => {
  // TODO: 刷新数据逻辑
  ElMessage.success("数据已刷新");
};

const handleEventAction = (event: any) => {
  // TODO: 处理事件逻辑
  console.log("处理事件:", event);
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.chart-card {
  min-height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.user-icon {
  background-color: #e6f7ff;
  color: #1890ff;
}

.article-icon {
  background-color: #f6ffed;
  color: #52c41a;
}

.event-icon {
  background-color: #fff2e8;
  color: #fa8c16;
}

.volunteer-icon {
  background-color: #f9f0ff;
  color: #722ed1;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.events-card,
.activity-card,
.learning-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-charts {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #666;
}

.chart-placeholder p {
  margin: 8px 0;
}

.learning-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learning-item {
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.learning-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.learning-detail {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}
</style>
